<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高德地图</title>
    <script src="/OL_SDK/include-openlayers-local.js"></script>
</head>

<body>
    <div id="map">

    </div>
    <script>
        var gaode_vector = new ol.layer.Tile({
            title: "高德地图-矢量图层",
            source: new ol.source.XYZ({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
                wrapX: false
            }),
            zIndex: 1001,
            opacity: 0.5,
            name: "gaode"
        });
        var gaode_image = new ol.layer.Tile({
            title: "高德地图-影像图层",
            source: new ol.source.XYZ({
                url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}",
                wrapX: false
            }),
            zIndex: 1000
        })
        const map = new ol.Map({
            target: "map",
            /* 设置地图图层 */
            layers: [gaode_vector, gaode_image],
            /* view设置地图 以坐标,中心点,放大级别 */
            view: new ol.View({
                center: [114.30, 30.50],
                zoom: 4,
                //经纬度坐标系
                projection: "EPSG:4326"
            })
        })
        console.log(gaode_vector, 'gaode_vector')
        /* get可以获取图层某个属性 */
        /* var opacity = gaode_vector.getOpacity()
        var opacity = gaode_vector.setOpacity(0.9) */
        var opacity = gaode_vector.get("opacity")
        gaode_vector.set("opacity", 0.6)
        console.log(gaode_vector.get("name"), 'gaode_vector.get("name")')
        const vec_properties = gaode_vector.getProperties()
        console.log(vec_properties, 'gaode_vector.getProperties()')
        console.log(gaode_vector.values_, 'gaode_vector.values_ ')
        console.log(gaode_vector.values_ === vec_properties, 'gaode_vector.values_ === vec_properties')
        // false
    </script>
</body>

</html>